<!--
 * @Author: LiuYan
 * @Date: 2022-12-21 14:24:38
 * @LastEditors: LiuYan
 * @LastEditTime: 2023-01-04 10:16:21
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./common/css/coommon.css" />
  </head>
  <body>
    <div
      class="requirementListOfSchemeDesignDraft"
      id="requirementListOfSchemeDesignDraft"
    >
      <div class="template">
        <img src="./common/img/common/template.png" />&ensp;下载模版
      </div>
      <div class="header">
        方案设计稿需求受理单
        <span>（正页：由商务部填写）</span>
      </div>
      <div class="descriptions">
        <div class="span" style="width: 16.75%">需求编号</div>
        <div class="span" style="width: 16.75%">
          <div class="input-group">
            <input prop="test" placeholder="请输入需求编号" />
          </div>
        </div>
        <div class="span" style="width: 16.75%">发起人</div>
        <div class="span" style="width: 16.75%">
          <div class="input-group">
            <input prop="test1" placeholder="请输入发起人" />
          </div>
        </div>
        <div class="span" style="width: 16.75%">商务部</div>
        <div class="span" style="width: 16.93%">
          <div class="input-group">
            <input prop="test2" placeholder="请输入商务部" />
          </div>
        </div>
        <div class="span" style="width: 16.75%">项目名称</div>
        <div class="span" style="width: 83.35%">
          <div class="input-group">
            <input prop="test3" placeholder="请输入项目名称" />
          </div>
        </div>
        <div class="span" style="width: 16.75%; height: 100px">业务范围</div>
        <div class="span" style="width: 83.35%; height: 100px">
          <div class="radio-input">
            <label :for="'radio'+index" v-for="(item,index) in radioList">
              <input
                :id="'radio'+index"
                type="radio"
                name="radio"
                prop="radioName"
                v-model="defRadio"
                :value="item.name"
              />&ensp;{{item.name}}
            </label>
          </div>
        </div>
        <div class="span" style="width: 16.75%; height: 100px">
          需求背景及建设内容描述
        </div>
        <div class="span" style="width: 83.35%; height: 100px">
          <div class="input-group">
            <textarea prop="test4" placeholder="说明：商务部填写"></textarea>
          </div>
        </div>
        <div class="span" style="width: 16.75%">期望完成时间</div>
        <div class="span" style="width: 33.25%">
          <div class="input-group">
            <input placeholder="请输入期望完成时间" />
          </div>
        </div>
        <div class="span" style="width: 16.75%">需求受理人</div>
        <div class="span" style="width: 33.6%">
          <div class="input-group">
            <input prop="test5" placeholder="请输入需求受理人" />
          </div>
        </div>
        <div class="span" style="width: 16.75%; height: 100px">
          工作量评估及预计完成时间
        </div>
        <div class="span" style="width: 83.35%; height: 100px">
          <div class="input-group">
            <textarea prop="test6" placeholder="说明：产品部填写"></textarea>
          </div>
        </div>
        <div class="span" style="width: 16.75%; height: 100px">
          版本计划及备注
        </div>
        <div class="span" style="width: 83.35%; height: 100px">
          <div class="input-group">
            <textarea prop="test7" placeholder="说明：产品部填写"></textarea>
          </div>
        </div>
      </div>
      <p class="warning">
        *为保障需求及传递时的一致性，请需求提出人严格按照模版要求填写提报
      </p>
      <button class="button_success">受理单</button>
      &ensp;
      <button @click="onUpload" class="button_success_plain">
        &ensp;附件&ensp;
      </button>
      <input style="display: none" v-model="url" prop="url" />&ensp;{{textUrl}}
    </div>
  </body>
  <script src="./common/js/vue.js"></script>
  <script type="module">
    import PropsForm from "./common/js/propsForm.js";
    const { createApp } = Vue;
    const app = createApp({
      data() {
        return {
          defRadio: "定制化开发项目",
          url: "",
          textUrl: "",
          radioList: [
            {
              id: "1",
              name: "定制化开发项目",
            },
            {
              id: "2",
              name: "数字化治理项目",
            },
            {
              id: "3",
              name: "未来社区项目",
            },
          ],
        };
      },
      methods: {
        onUpload() {
          const input = document.createElement("input");
          input.type = "file";
          document.body.appendChild(input);
          input.click();
          // 上传结束之后，删除此图标
          input.remove();
          input.onchange = function (val) {
            const filePath = val.target.files[0];
            const formData = new FormData();
            formData.append("file", filePath);
            // ajax之后在赋值
            this.url = filePath.name;
            this.textUrl = filePath.name;
          }.bind(this);
        },
      },
    }).mount("#requirementListOfSchemeDesignDraft");
    function save() {
      let propsForm = new PropsForm({
        el: document.querySelector("#requirementListOfSchemeDesignDraft"),
      });
      return propsForm.form;
    }
    window.save = save;
  </script>
</html>
